<template>
  <!-- 首页list卡片组件 -->
  <a-card class="appCard" hoverable @click="doCardClick">
    <template #actions>
      <!-- <span class="icon-hover"> <IconThumbUp /> </span> -->
      <span class="icon-hover" @click.stop="doShare"> <IconShareInternal /> </span>
    </template>
    <template #cover>
      <div
        :style="{
          height: '204px',
          overflow: 'hidden',
        }"
      >
        <img
          :style="{ width: '100%', transform: 'translateY(-20px)' }"
          :alt="app.appName"
          :src="app.appIcon"
        />
      </div>
    </template>
    <a-card-meta :title="app.appName" :description="app.appDesc">
      <template #avatar>
        <div
          :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }"
        >
          <a-avatar :image-url="app.user?.userAvatar" :size="24" :style="{ marginRight: '8px' }" />
          <a-typography-text>{{app.user?.userName ?? '匿名用户'}}</a-typography-text>
        </div>
      </template>
    </a-card-meta>
  </a-card>
  <!-- 弹框分享组件 -->
   <ShareModel :link="link" :title="title" ref="shareModel"/>
</template>

<script setup lang="ts">
import ShareModel from '@/components/ShareModel.vue';
import { ref } from 'vue';
import {
  IconThumbUp,
  IconShareInternal,
  IconMore,
} from '@arco-design/web-vue/es/icon';
import API from '@/api';
import { useRouter } from 'vue-router';

const props = withDefaults(defineProps<{
  app: API.AppVO
}>(), {
  app: () => {
    return {}
  }
}) 

const router = useRouter()

const doCardClick = () => {
  router.push(`app/detail/${props.app.id}`)
}

// 分享
const shareModel = ref()
const link = ref('https://www.baidu.com/')
const title = ref('分享应用')
const doShare = () => {
  shareModel.value.openModel()
}
</script>


<style lang="scss" scoped>
.list-demo-item:hover .arco-card-cover img {
  transform: scale(1.2)!important;
  
}
.arco-card-cover img {
  transition: all linear 0.3s;
}

.appCard {
  cursor: pointer;
}
.icon-hover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: all 0.1s;
}
.icon-hover:hover {
  background-color: rgb(var(--gray-2));
}
</style>